<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var options = {
          title: 'Wave form qr=60'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        //chart.draw(data, options);
        function redraw() {
          var params = [];
          for (var i = 0; i < 8; i++) {
            params.push(parseInt(document.getElementById("param" + i).value));
          }
          var nsamp = parseInt(document.getElementById("nsamp").value);
          var rawdata = envdata(params, nsamp);
          var data = google.visualization.arrayToDataTable(rawdata);
          chart.draw(data, {title: 'Envelope'});
        }
        for (var i = 0; i < 8; i++) {
          document.getElementById("param" + i).addEventListener("change", redraw);
        }
        document.getElementById("nsamp").addEventListener("change", redraw);
        redraw();
      }
    </script>
  </head>
  <body>
    Level 1: <input id="param0" type="text" value="99">
    Rate 1: <input id="param4" type="text" value="80"><br/>
    Level 2: <input id="param1" type="text" value="80">
    Rate 2: <input id="param5" type="text" value="80"><br/>
    Level 3: <input id="param2" type="text" value="99">
    Rate 3: <input id="param6" type="text" value="70"><br/>
    Level 4: <input id="param3" type="text" value="0">
    Rate 4: <input id="param7" type="text" value="80"><br/>
    Number of samples: <input id="nsamp" type="text" value="4000"><br/>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
  <script>

var envmask = [[0, 1, 0, 1, 0, 1, 0, 1],
    [0, 1, 0, 1, 0, 1, 1, 1],
    [0, 1, 1, 1, 0, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 1, 1]];

var outputlevel = [0, 5, 9, 13, 17, 20, 23, 25, 27, 29, 31, 33, 35, 37, 39,
41, 42, 43, 45, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61,
62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80,
81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99,
100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114,
115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127];

function envenable(i, qr) {
  var shift = (qr >> 2) - 11;
  if (shift < 0) {
    var sm = (1 << -shift) - 1;
    if ((i & sm) != sm) return false;
    i >>= -shift;
  }
  return envmask[qr & 3][i & 7] != 0;
}

function attackstep(lev, i, qr) {
  var shift = (qr >> 2) - 11;
  if (!envenable(i, qr)) return lev;
  var slope = 17 - (lev >> 8);
  lev += slope << Math.max(shift, 0);
  return lev;
}

function decaystep(lev, i, qr) {
  var shift = (qr >> 2) - 11;
  if (!envenable(i, qr)) return lev;
  lev -= 1 << Math.max(shift, 0);
  return lev;
}

function Env(params) {
  this.params = params;
  this.level = 0;
  this.ix = 0;
  this.i = 0;
  this.down = true;
  this.advance(0);
}

Env.prototype.getsample = function() {
  if (envenable(this.i, this.qr) && (this.ix < 3 || (this.ix < 4 && !this.down))) {
    if (this.rising) {
      var lev = attackstep(this.level, this.i, this.qr);
      console.log(lev);
      if (lev >= this.targetlevel) {
        lev = this.targetlevel;
        this.advance(this.ix + 1);
      }
      this.level = lev;
    } else {
      var lev = decaystep(this.level, this.i, this.qr);
      if (lev <= this.targetlevel) {
        lev = this.targetlevel;
        this.advance(this.ix + 1);
      }
      this.level = lev;
    }
  }
  this.i++;
  return this.level;
}

Env.prototype.advance = function(newix) {
  this.ix = newix;
  if (this.ix < 4) {
    var newlevel = this.params[this.ix];
    var scaledlevel = Math.max(0, (outputlevel[newlevel] << 5) - 224);
    this.targetlevel = scaledlevel;
    this.rising = (this.targetlevel - this.level) > 0;
    var rate_scaling = 0;
    this.qr = Math.min(63, rate_scaling + ((this.params[this.ix + 4] * 41) >> 6));
  }
  //console.log("advance ix="+this.ix+", qr="+this.qr+", target="+this.targetlevel+", rising="+this.rising);
}

Env.prototype.keyup = function() {
  this.down = false;
  this.advance(3);
}

function attackdata(qr) {
  var result = [['samp', 'env']];
  var i = 0;
  var count = 0;
  var lev = 1716;
  while (true) {
    result.push([i, lev]);
    lev = attackstep(lev, i, qr);
    lev = Math.min(lev, 15 << 8);
    if (lev >= 15 << 8) {
      count++;
      if (count > 100) break;
    }
    i++;
  }
  return result;
}

function envdata(params, nsamp) {
  console.log(nsamp);
  var result = [['samp', 'env']];
  var env = new Env(params);
  for (var i = 0; i < nsamp; i++) {
    if (i == 3 * nsamp / 4) {
      env.keyup();
    }
    result.push([i, env.getsample()]);
  }
  return result;
}


  </script>
</html>
